<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
    <el-table
            :data="roleData"
            border
            style="width: 100%">
        <el-table-column
                prop="rid"
                label="角色编号"
                width="50">
        </el-table-column>
        <el-table-column
                prop="rname"
                label="角色名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="rdesc"
                label="角色描述">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button @click="" type="text" size="small">查看</el-button>
                <el-button type="text" size="small" @click="popRoleDialog(scope.row.rid)">分配权限</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--为用户分配角色-->
    <el-dialog
            title="分配权限"
            :visible.sync="dialogVisibleRole"
            width="30%"
            :before-close="handleClose">
        <span slot="footer" class="dialog-footer">

            <el-tree
                    :data="allPerm"
                    show-checkbox
                    node-key="pid"
                    ref="rootTree"

                    :props="defaultProps">
            </el-tree>

            <el-button @click="dialogVisibleRole = false">取 消</el-button>
            <el-button type="primary" @click="modifyPer()">确 定</el-button>
          </span>
    </el-dialog>
</div>

</body>
<script>
    new Vue({
        el: "#app",
        created() {
            this.initPage()
        },
        data: {
            //分页数据
            pageIndex: 1,
            pageSize: 5,
            //查询到的所有用户信息
            roleData: [],
            //用户的查询条件
            userInfo: {},
            //当前呗修改的角色id
            roleId: 0,
            //全部的权限
            allPerm: [],
            //当前角色的角色
            rolePerm: [],
            //控制弹窗的变量
            dialogVisibleRole: false,
            //用于设定树级菜单名字的
            defaultProps: {
                children: 'childPermission',
                label: 'pname'
            }
        },
        methods: {
            initPage() {
                axios.post("/Role/GetAllRole", this.userInfo).then(resp => {
                    console.log(resp.data.data)
                    this.roleData = resp.data.data
                    console.log(this.roleData)
                })
            },
            //在弹出框的时候要完成两件事，查询全部权限以及子母关系，以及当前角色的权限
            popRoleDialog(thisRid) {
                this.roleId=thisRid
                axios.post("/Per/RolePer?rid="+thisRid).then(resp=>{
                    console.log(resp.data.data)
                    this.allPerm=resp.data.data.allPermissions
                    this.rolePerm=resp.data.data.rolePers
                    //默认选中的树的数据
                    setTimeout(() =>{
                        this.rolePerm.forEach(value => {
                            this.$refs.rootTree.setChecked(value, true, false);
                        })}, 100)
                })
                this.dialogVisibleRole = true
            },
            //当然在执行修改之前我们要吧当前这个用户的权限给他删掉，然后在将选中的权限给他加上去，所以我们要发两个请求
            // 删除当前用户的权限，以及插入当前用户的权限
            modifyPer() {
                let checkIds=this.$refs.rootTree.getCheckedKeys();
                axios.post("/Per/ModifyUserPer?rid=" + this.roleId + "&pers=" + checkIds).then(resp => {
                    console.log(resp)
                    this.dialogVisibleRole = false
                })
            }
        },

    })
</script>
</html>